<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';

import { useAccess } from '@vben/access';
import { VbenIcon } from '@vben/icons';

import { Spin } from 'ant-design-vue';

import { employeeQuerySensitive } from '#/api/company/audience';

interface Props {
  text?: string;
  accessPage?: number; // 查看页面 1 人员列表 2 人员详情 3 预登记 4 工作台 5 直接呼叫
  type?: number; // 查看的字段 1 手机号 2 邮箱 3 备用手机号
  employeeId?: number | string;
}

const props = withDefaults(defineProps<Props>(), {
  text: '',
  accessPage: undefined,
  type: undefined,
  employeeId: undefined,
});

const { hasAccessByCodes } = useAccess();
const currText = ref<string>(props.text);
watch(
  () => props.text,
  () => {
    currText.value = props.text;
  },
);
const loading = ref(false);
const hasAsterisk = computed(() => {
  return currText.value.includes('**');
});

async function check() {
  loading.value = true;
  try {
    const fullData = await employeeQuerySensitive({
      employeeId: props.employeeId,
      accessPage: props.accessPage,
      accessField: props.type,
    });
    currText.value = fullData || '-';
    loading.value = false;
  } catch (error) {
    console.log(error);
    loading.value = false;
  }
}

onMounted(() => {
  if (props.text) {
    // console.log(props.text);
    currText.value = props.text;
  }
});
</script>

<template>
  <div class="flex items-center justify-center gap-1">
    <Spin :spinning="loading" size="small">
      <span>{{ currText }}</span>
    </Spin>
    <span>
      <VbenIcon
        v-if="hasAsterisk && hasAccessByCodes(['employee:manager:sensitive'])"
        icon="mdi:eye"
        class="cursor-pointer text-[16px]"
        @click="check"
      />
    </span>
  </div>
</template>
